<template>
	<view>
		<u-navbar title="翼飞自助台球" :title-size="35" :title-bold="true" :immersive="true" :background="background"
			:border-bottom="false"></u-navbar>
		<view class="top">
			<view class="shop">
				<view style="padding-top: 10px;display: flex;">
					<view class="shop-img">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/shop.png" style="width:100%;height: 100%;">
						</image>
					</view>
					<view class="shop-name">
						{{orderList.has_shop.f_shop_name}}
					</view>
				</view>
			</view>
			<view class="inform">
				<view class="inform-lf">
					<view style="max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
						{{orderList.eq.f_eq_name}}
					</view>
					<view class="inform-cen">
						<view class="cen-p">
							桌台
						</view>
					</view>
				</view>
				<view class="inform-rg">
					{{orderList.f_eq_no}}
				</view>
			</view>

			<view class="price-lf" style="margin-left: 20px; margin-top: 10px;">
				收费规则
			</view>
			<view class="price">
				<!-- 	<view class="price-lf">
					收费规则
				</view> -->
				<view class="price-rg">
					<view class="" style="display: flex;justify-content: flex-end;" v-for="(item,index)  in ruleList">
						<view class="time">
							时段{{index+1}}：{{item.f_start}}-{{item.f_end}} &nbsp;{{item.f_money}}元/小时
						</view>
					</view>
					<view style="margin-top: 5px;">按分钟收费，结算后，多余押金自动退回</view>
				</view>
			</view>
		</view>
		<view class="discount">
			<view class="dis-shell">
				<view class="discount-lf" style="width: auto;">
					订单时长：
				</view>
				<view class="" style="display: flex;">
					<view class="discount-rg" style="font-size: 36rpx;">
						{{timelong}}
					</view>
				</view>
			</view>
			<view class="discount">
				<view class="dis-shell">
					<view class="discount-lf">
						优惠券
						<view class="" style="width: 30rpx; height: 23rpx; margin-left: 10rpx;">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/youhui.png"
								style="width:100%;height: 100%;">
							</image>
						</view>
					</view>
					<view class="" style="display: flex;">
						<view class="discount-rg">
							{{length?'可使用的优惠券':'暂无优惠券'}}
						</view>

						<!-- <view>
							<u-icon name="arrow-right" style="display: inline;"></u-icon>
						</view> -->
					</view>
				</view>
				<view class="discount" style="margin-left:20px; width: 100%; height: auto;  padding-bottom: 10px;"
					v-if="length">
					<u-radio-group @change="radioGroupChange">
						<view v-for="(item, index) in CouponList">
							<u-radio @change="radioChange" :key="index" :name="item.has_coupon.id"
								active-color="#03CC6D">
								满{{item.has_coupon.f_condition_money}}减{{item.has_coupon.f_free_money}}元
							</u-radio>
						</view>
					</u-radio-group>
				</view>
			</view>
			<view class="discount">
				<view class="dis-shell">
					<view class="discount-lf">
						支付方式
					</view>
					<view class="" style="display: flex;">
						<view class="discount-rg">微信支付/押金抵扣 </view>
					</view>
				</view>
			</view>
			<view class="discount">
				<view class="" style="display: flex; margin-left: 10px; padding-top: 15px;">
					<view style="width: 32rpx; height: 28rpx;margin-right: 10rpx;">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/speak.png" style="width:100%;height: 100%;">
						</image>
					</view>
					<view class="notice">
						充值成为会员，享更多优惠
					</view>
				</view>
				<view class="notice-bg">
					<view class="bg-content">
						会员免押金，台费低至5折
					</view>
					<view class="bg-btn">
						<view class="btn-p">
							成为会员
						</view>
					</view>
				</view>
				<view class="tip">
					<view class="tip-box">
						<view style="width: 28rpx; height: 28rpx;margin-right: 10rpx;">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/lianx.png"
								style="width:100%;height: 100%;">
							</image>
						</view>
						<view class="tip-p">
							如有疑问请联系店长
						</view>
					</view>
				</view>
			</view>
			<view class="pay">
				<view class="pay-lf">
					<!-- <view class="pay-img">
					<view class="img-p">
						押金可退
					</view>
				</view> -->
					<view class="cashpledge">
						<view style="font-size: 10px;display: inline">￥</view>{{setamount}}
						<!-- <view style="font-size: 10px;display: inline;color: #F9AF29; margin-left: 10rpx;">押金</view> -->
					</view>
					<view class="cash-tip">
						结算台费后，剩余费用自动退回
					</view>
				</view>
				<view class="pay-rg">
					<view class="pay-btn" @click="openpay" v-if="isloding==false">
						<view class="pay-p">
							确认结算
						</view>
					</view>
					<view class="pay-btn" v-if="isloding==true">
						<view class="pay-p">
							确认结算
						</view>
					</view>
				</view>
			</view>
		</view>
		<img @click="home" src="https://gongxiangtaiqiu.axa2.com/taiqiu/gohome.png"
			style="width: 70px;height:70px; position: fixed;right:0px; bottom: 100px;"></img>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: 'apple',
						disabled: false
					},
					{
						name: 'banner',
						disabled: false
					},
					{
						name: 'orange',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
				background: '#ffffff',
				shoplist: {},
				cash: '',
				orderId: '',
				orderList: {},
				status: '',
				user_id: '',
				length: '',
				CouponList: '',
				couponId: '',
				ruleList: {},
				shopid: '',
				setamount: '', //结算金额
				timelong: '',
				free_money: '',
				ioId: '',
				isloding: false,

			}
		},
		onLoad(option) {
			this.orderId = option.id
			this.timelong = option.f_use_long
			this.shopid = option.shopid
			console.log('上一页数据item', option, this.shopid)
			this.$Api.getOrderInfo({
				orderId: this.orderId
			}).then(res => {
				this.orderList = res.data.data
				this.setamount = parseFloat(res.data.data.f_sync_money).toFixed(2)
				this.status = res.data.data.f_status
				this.ioId = res.data.data.eq.id
				this.rule()
			});
			this.Coupons()
			if (this.CouponList.length == 0) {
				this.couponId = 0
			}
			this.countdown(this.timelong)
		},

		methods: {
			home() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			qwe(item) {
				this.free_money = item.has_coupon.f_free_money
				this.setamount = this.setamount - this.free_money
				console.log(item.has_coupon.f_free_money)
			},
			countdown(time) {
				const that = this
				let day = parseInt(time / 60 / 60 / 24)
				let hr = parseInt(time / 60 / 60 % 24)
				let min = parseInt(time / 60 % 60)
				let sec = parseInt(time % 60)
				day = day > 9 ? day : '0' + day
				hr = hr > 9 ? hr : '0' + hr
				min = min > 9 ? min : '0' + min
				sec = sec > 9 ? sec : '0' + sec
				let newhr = parseInt(hr) + parseInt(day * 24)
				that.timelong = `${hr}:${min}:${sec}`
				console.log(that.timelong)
				return `${hr}:${min}:${sec}`
			},
			//根据设备获取规则
			rule() {
				this.$Api.getEqRule({
					shopId: this.shopid,
					ioId: this.ioId
				}).then(res => {
					this.ruleList = res.data.data
					console.log(res.data.data, '规则列表')
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.couponId = e
				console.log(this.couponId, 'this.couponId');
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e, '啥');
			},
			//押金
			config() {
				this.$Api.getConfig({
					key: 'cashPledge'
				}).then(res => {
					this.cash = res.data.data
					console.log(this.cash, '押金')
				});
			},
			//优惠券列表
			Coupons() {
				this.$Api.myCoupons({
					type: 2, //1 我的优惠券列表  2 当前订单优惠券列表
					userId: uni.getStorageSync('userid'),
					// status: this.status,
					orderId: this.orderId, //订单id
					shopId: this.shopid,
				}).then(res => {
					this.CouponList = res.data.data
					this.length = res.data.data.length
					this.user_id = res.data.data.f_user_id
					console.log(this.CouponList, '我是优惠券列表')
					console.log(res.data.data[0].f_user_id, '可否使用优惠券')
				}).catch(res => {

				})
			},
			openpay() {
				uni.showModal({
					title: '结算订单',
					content: '您确认结算该笔订单吗？',
					confirmText: "确定",
					cancelText: '取消',
					showCancel: true,
					confirmColor: '#19C865',
					cancelColor: '#8e9091',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定')
							this.isloding = true
							this.$Api.finishOrder({
								orderId: this.orderId, //订单id
								couponId: this.couponId, //优惠卷id
								userId: uni.getStorageSync('userid'),
							}).then(res => {
								console.log(res, '成功000000')
								if (res.data.code == 0) {
									uni.showToast({
										icon: 'none',
										title: res.data.data
									})
									setTimeout(() => {
										// uni.navigateTo({
										// 	url: '/pagesB/orderDetails/orderDetails?id=' +
										// 		this.orderId
										// })
										uni.reLaunch({
											url: '/pagesB/orderDetails/orderDetails?id=' +
												this.orderId
										})
									}, 1000)
								} else if (res.data.code == 1) {
									uni.showToast({
										icon: 'none',
										title: res.data.data
									})
									this.isloding = false
								} else if (res.data.code == 2) {
									uni.showToast({
										icon: 'none',
										title: res.data.data
									})
									uni.requestPayment({
										provider: 'wxpay', //支付类型-固定值
										timeStamp: String(res.data.data
											.timeStamp), // 时间戳（单位：秒）
										nonceStr: res.data.data.nonceStr, // 随机字符串
										package: res.data.data.package, // 固定值
										signType: res.data.data.signType, //固定值
										paySign: res.data.data.sign, //签名
										success: function(res) {
											// console.log('success:' + JSON.stringify(res));
											// console.log("支付成功 loaing状态",this.isloding);
											this.isloding = false
											uni.showToast({
												icon: 'success',
												title: '支付成功'
											})
										},
										fail: function(err) {
											console.log('fail:' + JSON.stringify(err));
											console.log("支付失败 loaing状态", this.isloding);
											this.isloding = false
											uni.showToast({
												icon: 'none',
												title: '支付失败'
											})
										}
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					}
				})

			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.pay {
		width: 750rpx;
		height: 160rpx;
		background: #FFFFFF;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.cashpledge {
			// width: 150rpx;
			height: 36rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			margin-top: 30rpx;
		}

		.cash-tip {
			// width: 306rpx;
			height: 23rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-top: 20rpx;
		}

		.pay-img {
			width: 122rpx;
			height: 50rpx;
			background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/yajin.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			position: absolute;
			top: -10px;

			.img-p {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.pay-lf {
			width: 390rpx;
			height: 160rpx;
			margin-left: 20px;
		}

		.pay-rg {
			width: 300rpx;
			height: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.pay-btn {
				width: 280rpx;
				height: 88rpx;
				background: #222222;
				border-radius: 44rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.pay-p {

					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #02FF83;
				}
			}
		}
	}

	.top {
		width: 100%;
		// height: 330rpx;
		background-color: #ffffff;

		.shop {
			width: 100%;
			height: 30rpx;
			margin-top: 200rpx;
			display: flex;

			.shop-img {
				width: 30rpx;
				height: 30rpx;
				background-color: aquamarine;
				margin-left: 40rpx;
			}

			.shop-name {
				// width: 138rpx;
				height: 26rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				margin-left: 10rpx;
			}
		}

		.inform {
			width: 690rpx;
			height: 111rpx;
			background: #EDF9F5;
			border-radius: 8rpx;
			margin: auto;
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.inform-lf {
				width: 500rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
				margin-left: 10rpx;
				display: flex;
				flex: 1;
				// justify-content: space-between;
				// white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
			}

			.inform-cen {
				width: 106rpx;
				height: 44rpx;
				background: #FFFFFF;
				border: 2px solid #19C865;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20px;

				.cen-p {
					// width: 60rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #19C865;
				}
			}

			.inform-rg {
				width: 86rpx;
				height: 28rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				display: flex;
				flex: 1;
				justify-content: flex-end;
				padding-right: 20px;
			}
		}

		.price {
			width: 650rpx;
			border-radius: 8rpx;
			height: auto;
			margin: auto;
			margin-top: 30rpx;
			display: flex;
			padding-bottom: 25px;
			justify-content: space-between;
			align-items: center;


			.price-lf {
				// width: 101rpx;
				height: 76rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #6B6B6B;
			}

			.price-rg {
				// width: 394rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.time {
					height: 27rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
					line-height: 20rpx;
					text-align: right;
					margin-right: 10rpx;
					margin-top: 18rpx;
				}
			}
		}
	}

	.discount {
		width: 100%;
		// height: 98rpx;
		background: #FFFFFF;
		margin-top: 15rpx;

		.tip {
			.tip-box {
				width: 100%;
				display: flex;
				padding-top: 30rpx;
				height: 80rpx;
				background: #ffffff;
				padding-left: 18rpx;
			}

			.tip-p {
				// width: 197rpx;
				height: 22rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

		.notice-bg {
			width: 690rpx;
			height: 111rpx;
			background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/vipbg.png');
			background-size: 100% 100%;
			margin: auto;
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.bg-content {
				width: 384rpx;
				height: 31rpx;
				font-size: 32rpx;
				font-family: DingTalk JinBuTi;
				font-weight: 400;
				color: #222222;
			}

			.bg-btn {
				width: 200rpx;
				height: 60rpx;
				background: #EDF9F5;
				box-shadow: 0px 0px 9px 1px rgba(64, 201, 149, 0.3);
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.btn-p {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
				}
			}

		}

		.notice {
			// width: 310rpx;
			height: 27rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F9AF29;
		}

		.dis-shell {
			width: 690rpx;
			height: 111rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.discount-lf {
				width: 120rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #6B6B6B;
				display: flex;
			}

			.discount-rg {
				// width: 128rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
		}
	}
</style>